<template>
	<view class="all_box"@touchmove.stop = "">
		<!-- 品牌 -->
		<view class="pp_box" @touchmove.stop = "">
			<view class="sousuo">
				<input v-model="ss" type="text" value="" placeholder="请输入品牌"/>
				<view @click="sousuo">搜索</view>
			</view>
			<view class="pp_box1" v-for="item in list1" @click.stop="chexi(item)">{{item.Name}}</view>
		</view>
		<!-- 车系 -->
		<view class="cx_box" v-if="sta1 == 1" @click.stop="zt(1)"></view>
		<view class="cx_box2" v-if="sta1 == 1" @touchmove.stop = "">
			<view class="cx_box1" v-for="item in list2" @click.stop="nianxian(item)">{{item.Name}}</view>
		</view>
		<!-- 年限 -->
		<view class="nx_box" v-if="sta2 == 1" @click.stop="zt(2)"></view>
		<view class="nx_box2" v-if="sta2 == 1" @touchmove.stop = "">
			<view class="nx_box1" v-for="item in list3" @click.stop="chexin(item)">{{item}}</view>
		</view>
		<!-- 车型 -->
		<view class="cxi_box" v-if="sta3 == 1" @click.stop="zt(3)"></view>
		<view class="cxi_box2" v-if="sta3 == 1" @touchmove.stop = "">
			<view class="cxi_box1" v-for="item in list4" @click.stop="zuihou(item)">{{item.Name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return{
				ss:'',
				list: [
					{"letter": "A","data": []},
					{"letter": "B","data": []},
					{"letter": "C","data": []},
					{"letter": "D","data": []},
					{"letter": "E","data": []},
					{"letter": "F","data": []},
					{"letter": "G","data": []},
					{"letter": "H","data": []},
					{"letter": "I","data": []},
					{"letter": "J","data": []},
					{"letter": "K","data": []},
					{"letter": "L","data": []},
					{"letter": "M","data": []},
					{"letter": "N","data": []},
					{"letter": "O","data": []},
					{"letter": "P","data": []},
					{"letter": "Q","data": []},
					{"letter": "R","data": []},
					{"letter": "S","data": []},
					{"letter": "T","data": []},
					{"letter": "U","data": []},
					{"letter": "V","data": []},
					{"letter": "W","data": []},
					{"letter": "X","data": []},
					{"letter": "Y","data": []},
					{"letter": "Z","data": []},
				],
				list1:[],
				list2:[],
				list3:[],
				list4:[],
				sta1:0,
				sta2:0,
				sta3:0,
				seriesid:'',
				name1:'',
				name2:'',
				name3:'',
				name4:'',
			}
		},
		mounted() {
			this.pinpai()
		},
		methods: {
			sousuo:function(){
				this.$get('fxj/base/getcarbrand').then(res=>{
					this.list1 = JSON.parse(res.data.message)
					let lst = this.list1
					this.list1 = []
					lst.forEach((item)=>{
						console.log(item.Name.indexOf(this.ss) != -1 );  // true
						
						if(item.Name.indexOf(this.ss) != -1 ){
							this.list1.push(item)
						}
					})
				})
			},
			zt:function(e){
				if(e == 1){
					this.sta1 = 0
				}else if(e == 2){
					this.sta2 = 0
				}else if(e == 3){
					this.sta3 = 0
				}
			},
			zuihou:function(item){
				console.log(item,999)
				this.$emit('n_data',{
					pinpai:this.name1,
					chexi:this.name2,
					nianxian:this.name3,
					chexin:item
				})
			},
			chexin:function(item){
				this.name3 = item
				this.$get('fxj/base/getcarmodel',{
					purchaseyear:item,
					seriesid:this.seriesid
				}).then(res=>{
					console.log(JSON.parse(res.data.message))
					this.list4 = JSON.parse(res.data.message)
					this.sta3 = 1
				})
			},
			// 年限
			nianxian:function(item){
				this.name2 = item.Name
				this.seriesid = item.ID
				this.$get('fxj/base/getcaryear',{
					seriesid:item.ID
				}).then(res=>{
					// console.log(JSON.parse(res.data.message))
					this.list3 = JSON.parse(res.data.message)
					this.sta2 = 1
				})
			},
			// 车系获取
			chexi:function(item){
				this.name1 = item.Name
				this.$get('fxj/base/getcarseris',{
					brandid:item.ID
				}).then(res=>{
					// console.log(JSON.parse(res.data.message)[0].CarSeries)
					this.list2 = JSON.parse(res.data.message)[0].CarSeries
					this.sta1 = 1
				})
			},
			// 品牌获取
			pinpai:function(){
				this.$get('fxj/base/getcarbrand').then(res=>{
					this.list1 = JSON.parse(res.data.message)
				})
			},
		}
	}
</script>

<style scoped>
	.sousuo>input{
		width: 70%;
		height: 60rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
		margin-right: 20rpx;
		border-radius: 1000rpx;
	}
	.sousuo>view{
		width: 100rpx;
		height: 60rpx;
		background-color: #4185F5;
		color: #FFFFFF;
		border-radius: 1000rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.sousuo{
		width: 100vw;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0;
		position: fixed;
		top: 0;
		left: 0;
	}
	.cxi_box1{
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F5F5F5;
		display: flex;
		align-items: center;
	}
	.cxi_box2{
		width: 70vw;
		height: 100vh;
		background: #FFFFFF;
		overflow: hidden;
		overflow-y: scroll;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10006;
	}
	.cxi_box{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10005;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.nx_box1{
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F5F5F5;
		display: flex;
		align-items: center;
	}
	.nx_box2{
		width: 80vw;
		height: 100vh;
		background: #FFFFFF;
		overflow: hidden;
		overflow-y: scroll;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10004;
	}
	.nx_box{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10003;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.cx_box1{
		height: 100rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F5F5F5;
		display: flex;
		align-items: center;
	}
	.cx_box2{
		width: 90vw;
		height: 100vh;
		background: #FFFFFF;
		overflow: hidden;
		overflow-y: scroll;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10002;
	}
	.cx_box{
		width: 100vw;
		height: 100vh;
		background: rgba(0,0,0,0.3);
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10001;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.pp_box1{
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #F5F5F5;
	}
	.pp_box{
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
	}
	.all_box{
		width: 100vw;
		height: 100vh;
		padding-top: 100rpx;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
	}
</style>
